import React, { useState } from 'react';
import { View } from 'remax/wechat';
import TreeSelect from '@vant/weapp/dist/tree-select';
import Card from '@vant/weapp/dist/card';

let arr = [
  {
    // 导航名称
    text: '所有城市',
    // 禁用选项
    disabled: false,
    // 该导航下所有的可选项
    children: [
      {
        // 名称
        text: '温州',
        // id，作为匹配选中状态的标识
        id: 1,
        // 禁用选项
        disabled: true,
      },
      {
        text: '杭州',
        id: 2,
      },
    ],
  },
  {
    // 导航名称
    text: '湖北',
    // 禁用选项
    disabled: false,
    // 该导航下所有的可选项
    children: [
      {
        // 名称
        text: '武汉',
        // id，作为匹配选中状态的标识
        id: 3,
        // 禁用选项
        disabled: true,
      },
      {
        text: '咸宁',
        id: 4,
      },
    ],
  },
  {
    // 导航名称
    text: '上海',
    // 禁用选项
    disabled: false,
    // 该导航下所有的可选项
    children: [
      {
        // 名称
        text: 'xx区',
        // id，作为匹配选中状态的标识
        id: 5,
        // 禁用选项
        disabled: false,
      },
    ],
  },
];

let items = [{ text: '分组1' }, { text: '分组2' }];

export default () => {
  const [mainActiveIndex, setIndex] = useState(0);
  const [activeId, setId] = useState([]);

  const handleNavClick = ({ detail = {} }) => {
    console.log(detail);
    setIndex(detail.index || 0);
  };

  const handleItemClick = ({ detail = {} }) => {
    console.log('item clicked');
    const index = activeId.indexOf(detail.id);
    if (index > -1) {
      activeId.splice(index, 1);
    } else {
      activeId.push(detail.id);
    }
    setId(activeId);
  };

  return (
    <View>
      <TreeSelect
        items={arr}
        // items={items}
        main-active-index={mainActiveIndex}
        active-id={activeId}
        bind:click-nav={e => handleNavClick(e)}
        bind:click-item={e => handleItemClick(e)}
      >
        {arr.forEach((item, index) => {
          console.log(item, index, mainActiveIndex);
          if (mainActiveIndex === index) {
            return item.children.map((i, index) => (
              <View slot="content" key={index}>
                <Card
                  // slot="content"
                  num="2"
                  price={(5 * 0.9).toFixed(2)}
                  origin-price={5}
                  desc="描述信息"
                  onClick={() => console.log(i.text)}
                  title={i.text}
                  thumb="https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c"
                  thumb-mode="aspectFill"
                />
              </View>
            ));
          } else {
            return <span>123</span>;
          }
        })}
      </TreeSelect>
    </View>
  );
};
